<form nz-form [formGroup]="formModel" (ngSubmit)="submitForm()">
  <div class="toolbar margin-bottom" [ngClass]="isMobile?'wrap-mobile':'wrap'">
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6" *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">合作伙伴</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="Please input your name">
          <nz-select formControlName="agencyId" nzShowSearch nzAllowClear nzPlaceHolder="请选择合作伙伴"
                     (ngModelChange)="gainAgencyId($event)">
<!--            <nz-option nzLabel="不限" nzValue="-1"></nz-option>-->
            <nz-option *ngFor="let item of agencyList" [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">运营商</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="Please input your name">
          <nz-select formControlName="userId" nzShowSearch nzAllowClear nzPlaceHolder="请选择运营商">
<!--            <nz-option nzLabel="不限" nzValue="-1"></nz-option>-->
            <nz-option *ngFor="let item of userList" nzLabel="{{item?.username}}   {{item?.name}}"
                       nzValue="{{item.id}}"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="keyword">关键字</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="Please input your name">
          <input type="text" id="keyword" nz-input formControlName="keyword" placeholder="礼品名称"/>
        </nz-form-control>
      </nz-form-item>
    </div>


    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6" class="margin-bottom"
         [ngClass]="isMobile? '': 'padding-left'">
      <button *ngIf="!isMobile" nz-button nzType="primary" class="button_search"><i nz-icon nzType="search"
                                                                                    nzTheme="outline"></i>查询
      </button>
      <button *ngIf="isMobile" nz-button nzBlock nzType="primary" class="button_search"><i nz-icon nzType="search"
                                                                                           nzTheme="outline"></i>查询
      </button>
    </div>

  </div>
</form>


<div [ngClass]="isMobile?'wrap-mobile':'wrap'">
  <nz-table #nzTable [nzData]="listOfData" nzTableLayout="fixed"
            [(nzPageIndex)]="pageHelper.currentPage" [nzFrontPagination]="false"
            (nzPageIndexChange)="nzPageIndexChange($event)"
            [(nzPageSize)]="pageHelper.pageSize" [nzTotal]="pageHelper.totalItems"
            [nzScroll]="{ x: 'auto' }" [nzPageSizeOptions]="pageHelper.pageSizeOptions" nzShowSizeChanger (nzPageSizeChange)="onPageSizeChange($event)">
    <thead>
    <tr>
      <th>ID</th>
      <th>商品名称</th>
      <th>商品图片</th>
      <th *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">合作伙伴</th>
      <th>运营商</th>
      <th>成本价</th>
      <th>规格</th>
      <th>描述</th>
    </tr>
    </thead>
    <tbody>
    <ng-container *ngFor="let data of nzTable.data let index = index">
      <tr>
        <td nzEllipsis>{{ index + 1 }}</td>
        <td nzEllipsis>{{ data.name }}</td>
        <td nzEllipsis>
          <div (click)="showModal(data)" *ngIf="data.fileName">
            <img [src]="serverFileUrl + data.fileName" width="50px" height="50px">
          </div>
          <div *ngIf="!data.fileName">
            <img src="assets/img/default_image.jpg" width="50px" height="50px">
          </div>
        </td>
        <td nzEllipsis *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">
          <a (click)="skipAgency(data)">
            <div>{{ data.agencyName }}</div>
            <div class="text-sm text-grey">{{ data.agencyNo}}</div>
          </a>
        </td>
        <td nzEllipsis><a (click)="skipMerchant(data)">
          <div>{{data.username}}</div>
          <div class="text-sm text-grey">{{data.uname}}</div>
        </a>
        <td nzEllipsis>{{ data.costPrice }}</td>
        <td nzEllipsis>{{ data.spec }}</td>
        <td nzEllipsis>
          <a nz-tooltip [nzTooltipTitle]="data.desc" *ngIf="data.desc">查看描述</a>
          <span *ngIf="!data.desc">暂无描述</span>
        </td>
      </tr>
    </ng-container>
    </tbody>
  </nz-table>
  <nz-modal nzFooter=" " [(nzVisible)]="isVisible" nzTitle="礼品图片" (nzOnCancel)="handleCancel()">
    <ng-container *nzModalContent>
      <div style="text-align: center">
        <img [src]="serverFileUrl + fileName" width="400rpx" height="400rpx">
      </div>
    </ng-container>
  </nz-modal>
</div>
